<template>
  <div>
    <div :style="backgroundDiv" >
      <h3 class="login_title">单词本系统登录</h3>
      <div style="margin-top: 20px">.</div>
      <div style="margin-top: 200px ;" >
        <mt-field label="邮箱" placeholder="请输入邮箱"  type="email" v-model="loginForm.email"></mt-field>
        <mt-field label="密码" placeholder="请输入密码" type="password" v-model="loginForm.password"></mt-field>
        <br>
        <div class="mybtn"><mt-button type="primary" size="large" v-on:click="login">登录</mt-button></div>
        <div class="mybtn"><mt-button  type="primary" size="large" v-on:click="register">注册</mt-button></div>

      </div>
    </div>

  </div>

</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
      name: "Login",
      data () {
        return {
          loginForm: {
            email:'',
            password: ''
          },
          backgroundDiv: {
            backgroundImage:'url(' + require('../assets/register.jpg') + ')',
            backgroundRepeat:'no-repeat',
            backgroundSize:'100% 50%'
          },
        }
      },

      methods: {
        login () {
          if(!this.loginForm.email){
            Toast("请填写邮箱")
            return false
          }else if(!this.loginForm.password){
            Toast("请填写密码")
            return false
          }else if(this.loginForm.password.length !=6){
            Toast("密码需要是6位")
            return false
          }
          else{
            this.$axios.post('/login',this.loginForm)
              .then(res => {
                if (res.data.code === 200) {
                  this.$store.commit('SET_TOKEN',true)
                  this.$store.commit('GET_USERNAME',res.data.data.username)
                  this.$store.commit('SET_ID',res.data.data.id)
                  this.$store.commit('SET_EMAIL',res.data.data.email)
                  Toast("登录成功")
                  this.$router.push({'path':'/home'})
                }else {
                  Toast("登录失败")
                }
              })
          }
        },
        register(){
          this.$router.push('/register')
        }
      }
    }

</script>

<style scoped>
  #poster {

    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
  }
  .title_show{
    margin: 80px auto;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 0px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .mybtn{
    margin: 20px;
  }
</style>
